<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <!-- 1.引入对应的库 -->
    <!-- react核心库 -->
    <script src="./js/react.js"></script>
    <!-- 把虚拟dom转换为真实的dom并挂载到页面节点中显示出来 -->
    <script src="./js/react-dom.js"></script>
  </head>
  <body>
    <!-- 2.页面节点 -->
    <div id="root"></div>

    <!-- 3.声明对应的渲染语法 -->
    <script>
      // 1.定义要渲染的html内容，html内容要以js的方式来定义 ==> 虚拟dom
      const h = React.createElement
      // <h3>hello React</h3>
      // 虚拟dom对象
      // const vnode = h('h3', { title: 'abc' }, 'hello React')
      const vnode = h('ul', {}, [h('li', {}, 'aaa'), h('li', {}, 'bbb')])

      // react18之前写法
      // ReactDOM.render(vnode, document.getElementById('root'))
      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
